<template>
  <div id="heat-map"></div>
</template>

<script>
import heatmapData from "../../data/outting/heatmapData";
import locating from "../../data/outting/locating";

export default {
  name: "heatmap",
  props: ["area"],
  data() {
    return {};
  },
  mounted() {
    this.createMap();
  },
  watch: {
    area: function (idxVal, oldVal) {
      console.log(typeof idxVal);
      if (idxVal === oldVal) {
        return;
      }
      if (idxVal == "") {
        this.$data.heatmap.setDataSet({
          data: heatmapData,
          max: 1,
        });
        return;
      }
      let newData = locating[idxVal];
      this.$data.heatmap.setDataSet({
        data: [...newData],
        max: 1,
      });
    },
  },
  methods: {
    createMap() {
      // 地图图层
      var map = new window.AMap.Map("heat-map", {
        resizeEnable: true,
        center: [116.418261, 39.921984],
        zoom: 11,
      });

      // 热力图图层
      var heatmap;
      var that = this;
      map.plugin(["AMap.HeatMap"], function () {
        //初始化heatmap对象
        heatmap = new window.AMap.HeatMap(map, {
          radius: 75, //给定半径
          opacity: [0, 0.8],
          gradient: {
            0.5: "blue",
            0.65: "rgb(117,211,248)",
            0.7: "rgb(0, 255, 0)",
            0.9: "#ffea00",
            1.0: "red",
          },
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
          data: heatmapData,
          max: 1,
        });

        that.$data.heatmap = heatmap;
      });
    },
  },
};
</script>

<style>
#heat-map {
  width: 100%;
  height: 100%;
  cursor: grab;
}
</style>
